<template>
  <div class="dashboard-container">
    <div class="employees-container">
      <el-card class="head-card">
        <el-row type="flex" justify="space-between">
          <el-col :span="4">
            <div class="info-box">
              <i class="el-icon-info" />
              <span>共{{ page.total }}条记录</span>
            </div>
          </el-col>
          <el-col class="right-col" :span="6">
            <el-button
              v-if="checkMenuPermission('import')"
              type="warning"
              @click="toImport"
            >导入</el-button>
            <el-button type="danger" @click="exportHandler">导出</el-button>
            <el-button type="primary" @click="showDialog">新增员工</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="bottom-card">
        <!-- table -->
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="序号" width="150" />
          <el-table-column prop="username" sortable label="姓名" width="150" />
          <el-table-column
            prop="workNumber"
            sortable
            label="工号"
            width="150"
          />
          <el-table-column
            prop="formOfEmployment"
            sortable
            label="聘用形式"
            width="150"
            :formatter="formatter"
          />
          <el-table-column
            prop="departmentName"
            sortable
            label="部门"
            width="150"
          />
          <el-table-column
            prop="timeOfEntry"
            sortable
            label="入职时间"
            width="150"
          >
            <template v-slot:default="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column sortable label="账户状态" width="150" />
          <el-table-column sortable label="是否在职" width="150" />
          <el-table-column label="操作" width="280" fixed="right">
            <template #default="{row}">
              <el-button
                v-if="checkMenuPermission('detail')"
                type="text"
                size="small"
                @click="examine(row.id)"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
                @click="regularization(row.id)"
              >转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button
                type="text"
                size="small"
                @click="showRole(row.id)"
              >角色</el-button>
              <el-button
                v-if="checkPointPermission('delete_employees')"
                type="text"
                size="small"
                @click="delEmployees(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page.sync="page.page"
          :page-size.sync="page.pagesize"
          layout="prev, pager, next"
          :total="page.total"
          @current-change="ChangePage"
        />
      </el-card>
      <!-- 弹窗 -->
      <employess-dialog ref="dialog" />
      <regularization ref="regDialog" />
      <roleDialog ref="roleDialog" />
    </div>
  </div>
</template>
<script>
// 导入弹窗组件
import regularization from '@/views/employees/components/regularization.vue'
import employessDialog from './components/employessDialog.vue'
import roleDialog from './components/roleDialog.vue'
import {
  getEmployeeList,
  delEmployeeById,
  getRegularization
} from '../../api/employees'
// 导入抽取的对应关系
import EmployeeEnum from '../../api/constant/employees'
// 导入混入
import mixins from '../../mixins'
export default {
  components: {
    employessDialog,
    regularization,
    roleDialog
  },
  mixins: [mixins],
  data() {
    return {
      list: [],
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      }
    }
  },
  created() {
    this.getEmployeeInfo()
  },
  methods: {
    // 角色
    showRole(id) {
      this.$refs.roleDialog.getInfoAndShow(id)
    },
    // 转正
    async regularization(id) {
      this.$refs.regDialog.visible = true
      const res = await getRegularization(id)
      // console.log(res)
    },
    // 查看
    examine(id) {
      this.$router.push({ name: 'detail', params: { id }})
    },
    // 导出
    exportHandler() {
      // 导入模块
      import('@/vendor/Export2Excel').then(excel => {
        // 表头 每一个对象
        const tHeader = Object.keys(this.list[0]) // 取出表头
        // 数据 二维数组
        const data = []
        this.list.forEach(item => {
          // 保存每一个对象数据数组
          const _arr = []
          // item 是每一个对象
          Object.keys(item).forEach(key => {
            _arr.push(item[key])
          })
          // 处理完毕
          data.push(_arr)
        })

        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 导入
    toImport() {
      this.$router.push({ path: './import' })
    },
    // 删除
    async delEmployees(id) {
      // console.log(id)
      await delEmployeeById(id)
      // 提示用户删除成功
      this.$message.success('删除成功')
      // 更新数据
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page--
      }
      this.getEmployeeInfo()
    },
    // 点击新增，显示弹窗
    showDialog() {
      this.$refs.dialog.visible = true
    },
    // 自定义table数据渲染
    formatter(row) {
      // filter方法获取
      // const res = EmployeeEnum.hireType.filter(v => {
      //   if (v.id === row.formOfEmployment) {
      //     return true
      //   } else {
      //     return false
      //   }
      // })
      // return res[0].value
      // Array的find 方法（只获取满足条件的第一个）
      const res = EmployeeEnum.hireType.find(v => {
        return v.id === +row.formOfEmployment
      })
      return res.value
    },
    // 获取员工信息
    async getEmployeeInfo() {
      const res = await getEmployeeList(this.page)
      // console.log(res)
      this.list = res.rows
      this.page.total = res.total
    },
    ChangePage(newPage) {
      this.page.page = newPage
      this.getEmployeeInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.employees-container {
  padding: 20px;
  // 头部
  .head-card {
    .right-col {
      text-align: right;
    }
    .info-box {
      display: inline-block;
      height: 100%;
      border: 1px solid #91d5ff;
      border-radius: 4px;
      line-height: 40px;
      padding: 2px 10px;
      background-color: #e6f7ff;
      i {
        margin-right: 5px;
        color: #409eff;
        font-size: 20px;
      }
      span {
        font-size: 18px;
      }
    }
  }
  // 底部
  .bottom-card {
    margin-top: 20px;
    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
